
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<title>热门新闻</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap-reboot.min.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap-grid.min.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}" />
	<style>
        img{max-width: 100%;}
        img.avatar {width: 16px; height: 16px;}
        .jump-link{cursor: pointer;}
	</style>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark sticky-top">
    <div class="container">
    <a class="navbar-brand" href="#">中国热</a>

    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#baidu">百度 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#qq">腾讯</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#weibo">微博</a>
            </li>
        </ul>
    </div>
        </div>
</nav>

    <div class="container-fluid">
        <div class="row">
            <div id="baidu" class="col-md-3 pt-5">
                <h2 class="mt-3"><a target="_blank" href="http://top.baidu.com/buzz?b=1">百度热搜</a></h2>
                <p><a class="btn btn-primary btn-sm" href="{{ url_for('refresh_baidu') }}">刷新</a></p>
                <ol>
                    {% for new in baidu_news: %}
                    <li>
                        <a target="_blank" href="{{ new.link }}">{{ new.title }}</a>
                        {% if new.is_new == 1 %}
                        <span class="text-danger small">新</span>
                        {% endif %}

                        <div class="float-right">
                            <code class="text-dark">{{ new.index }}</code>
                            {% if new.is_new == 1 %}
                            <span class="text-danger">⇡</span>
                            {% else %}
                            <span class="text-success">⇣</span>
                            {% endif %}
                        </div>
                    </li>
                    {% endfor %}
                </ol>
            </div>

            <div id="qq" class="col-md-3 pt-5">
                <h2 class="mt-3"><a target="_blank" href="https://news.qq.com">腾讯热搜</a></h2>
                <p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('refresh_qq') }}">刷新</a>
                </p>

                    {% for new in qq_news: %}
                    <div class="card mb-3 bg-light">
                        <div class="card-header border-0 bg-transparent d-flex flex-wrap">
                        {% for img in new["imgs"] %}
                        <img src="{{ url_for('static', filename='images/' + img) }}" class="" />
                        {% endfor %}
                        </div>
                        <div class="card-body">
                            <a class="card-title" target="_blank" href="{{ new.link }}">{{ new.title }}</a>
                            <p class="card-text small text-muted">
                                <a href="{{ new.author_url }}" class="text-muted">{{ new.author }}</a>
                                <span>{{ new.time }}</span>
                            </p>
                        </div>
                    </div>
                    {% endfor %}

            </div>

            <div id="weibo" class="col-md-6 pt-5">
                <h2 class="mt-3"><a target="_blank" href="https://weibo.com/?category=0">微博</a></h2>
                <p>
                    <a class="btn btn-primary btn-sm" href="{{ url_for('refresh_weibo') }}">刷新</a>
                </p>

                    {% for new in weibo_news: %}
                    <div class="card mb-3 bg-light jump-link" data-href="{{ new.link }}">
                        <div class="card-header border-0 bg-transparent d-flex flex-wrap">
                            <div class="row">
                        {% for img in new["imgs"] %}
                        <img src="{{ url_for('static', filename='images/' + img) }}" class="mt-3 {% if new['img_count']%2==0 %}col-sm-6{% elif new['img_count']%3==0 %}col-sm-4{% else %}col-sm-12{% endif %}" />
                        {% endfor %}
                                </div>
                        </div>
                        <div class="card-body">
                            <div class="card-title">{{ new.title|safe }}</div>
                            <div class="card-text text-muted small">
                                <a href="{{ new.author_url }}" class="text-muted" target="_blank">
                                    <img src="{{ url_for('static', filename='images/' + new.author_avatar_url) }}" class="avatar" />
                                    {{ new.author }}
                                </a>
                                <span>{{ new.time }}</span>
                                <span>分享: {{ new.share_count }}</span>
                                <span>回复: {{ new.reply_count }}</span>
                                <span>点赞: {{ new.like_count }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
<script>
    var items = document.getElementsByClassName("jump-link");

    Array.from(items).forEach(function (element) {

        // 阻止下级a元素点击时响应本元素点击事件
        var a = element.getElementsByTagName("a");
        Array.from(a).forEach(function (element) {
            element.addEventListener('click', function (e) {
                // 阻止冒泡
                e.stopPropagation();
            })
        });

        // 本元素点击时跳转
        element.addEventListener('click', function (e) {
            window.open(this.dataset.href, "_blank");
        })
    });

</script>

</body>
</html>
